<template>
  <div>
    <div class="spqddiv">
      <img
        class="spqdimg"
        :src="poot+'miaozishangchengFile/commodity/'+name+'/'+name+' '+colour+'.jpg'"
      />
      <div class="spqdfont">
        <font class="ft">{{name}} {{memory}} {{colour}}</font>
        <br />
        <font class="fm">评分</font>
        <div>
          <van-rate class="sppf" :change="sppf()" v-model="score" />
          <font class="sppffont">{{miaoshu}}</font>
        </div>
        <van-divider
          contentPosition="center"
          customStyle="color: #1989fa;border-color: #1989fa;font-size: 18px;"
        ></van-divider>
      </div>
      <div class="divtextarea">
        <textarea :placeholder="tsxx" v-model="pjia"></textarea>
      </div>
      <div class="cd">{{cd}}/100</div>
      <div class="wjsc">
        <van-uploader v-model="fileList" multiple :max-count="3" />
      </div>
      <div>{{pjcd()}}</div>
      <van-button type="primary" size="normal" @click="tijiao()">提交</van-button>
    </div>
  </div>
</template>
<script>
import Header3 from "@/components/Headergl/Header3";
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";

export default {
  props: ["colour", "memory", "name", "time"],
  data() {
    return {
      score: 5,
      miaoshu: "",
      pjia: "",
      tsxx: "",
      cd: 0,
      fileList: [],
      name2: "xiaomi10",
      dangqianshijian: ""
    };
  },
  components: {
    Header3: Header3
  },
  computed: {
    ...mapState(["zhuantai"]),
    ...mapState(["poot"]),
    ...mapState(["user"])
  },
  methods: {
    ...mapMutations(["xg"]),
    tijiao() {
      this.chushihua();
      for (var i = 0; i < this.fileList.length; i++) {
        const file = this.fileList[i].file;
        console.log(file);
        const data = new FormData();
        data.append("fileName", file);
        this.$http
          .post(
            this.poot +
              "fileUpload/" +
              this.user +
              "/" +
              this.name +
              "/" +
              (i + 1) +
              "/" +
              this.dangqianshijian,
            data,
            {
              headers: {
                "Content-Type": "multipart/form-data"
              }
            }
          )
          .then(res => {
            console.log(res);
          })
          .catch(err => {
            console.log(err);
          });
      }
      if (this.pjia.length < 1) {
        this.pjia = "默认评价！！！";
      }
      this.$http
        .get(
          this.poot +
            "addeveluate/" +
            this.user +
            "/" +
            this.name +
            "/" +
            this.score +
            "/" +
            this.pjia +
            "/" +
            this.dangqianshijian +
            "/" +
            this.time
        )
        .then(response => {
          console.log(response.data);
          this.list = response.data;
        })
        .catch(function(error) {
          console.log(error);
          alert("获取数据失败");
        });
      this.$router.push("/quanbudingdan/3");
    },
    sppf() {
      if (this.score == 5) {
        this.miaoshu = "超爱";
        this.tsxx = "外形如何？品质如何？写写你的感受分享给网友吧！";
      }
      if (this.score == 4) {
        this.miaoshu = "喜欢";
        this.tsxx = "还不错吧，吐槽和建议都可以分享给网友哦！";
      }
      if (this.score == 3) {
        this.miaoshu = "满意";
        this.tsxx = "在那些反面改进会让您满意了？";
      }
      if (this.score == 2) {
        this.miaoshu = "一般";
        this.tsxx = "有什么建议帮我们改进吗？";
      }
      if (this.score == 1) {
        this.miaoshu = "失望";
        this.tsxx = "是什么让您失望了？吐槽给我们吧！";
      }
    },
    pjcd() {
      this.cd = this.pjia.length;
    },
    chushihua() {
      var now = new Date();
      this.dangqianshijian =
        now.getFullYear() +
        "-" +
        now.getMonth() +
        "-" +
        now.getDate() +
        " " +
        now.getHours() +
        "," +
        now.getMinutes() +
        "," +
        now.getSeconds();
    }
  },
  mounted() {}
};
</script>
<style scoped>
.van-button {
  margin-top: 20px;
  width: 80%;
  margin-left: 20px;
  margin-right: 20px;
  margin-bottom: 50px;
}
.wjsc {
  margin-top: 10px;
}
.cd {
  text-align: right;
  font-size: 3px;
  color: rgba(56, 47, 47, 0.432);
  margin-right: 20px;
}
.divtextarea {
  margin-top: 10px;
  width: 100%;
}
textarea {
  height: 80px;
  width: 95%;
  font-size: 10px;
  color: rgba(56, 47, 47, 0.432);
}
.sppffont {
  margin-left: 15px;
  font-size: 5px;
  color: red;
}
.sppf {
  margin-left: 15px;
}
.pj {
  margin-top: 60px;
}
.div {
  margin-top: 50px;
}
.van-rate {
  text-align: left;
}
.pfdiv1 {
  margin-left: 20px;
  margin-right: 30%;
}
.pfdiv2 {
  float: left;
  font-size: 15px;
}
.ft {
  font-size: 10px;
}
.fm {
  font-size: 5px;
  float: left;
  text-align: center;
}
.fj {
  color: red;
}
.spqdfont {
  height: 50px;
  margin-left: 25%;
}
.spqdimg {
  height: 50px;
  width: 50px;
  float: left;
}
.spqddiv {
  margin-top: 15px;
  text-align: left;
}
</style>